11. Responsive Design

I. Media Queries

Explanation: Media Queries ka use screen size ke hisaab se alag CSS apply karne ke liye hota hai. Jaise mobile, tablet, aur desktop ke layout alag ho sakte hain.

<style> body { background-color: lightblue; } @media (max-width: 600px) { body { background-color: lightcoral; } } </style> <h2>Resize this window</h2> <p>Screen choti hogi to background change hoga!</p> Run Code

II. Responsive Units (vw, vh, rem, em)

Explanation: px ke bajay responsive units jaise vw (viewport width), vh (viewport height), rem (root font size), aur em (parent font size) use karte hain taaki layout flexible ho.

<style> h2 { font-size: 5vw; } p { font-size: 2em; } </style> <h2>This is responsive heading</h2> <p>This is responsive paragraph</p> Run Code

III. Mobile-first Design

Explanation: Mobile-first approach me hum pehle mobile ke liye design karte hain, aur baad me media queries ke through larger screens ke liye adjust karte hain.

<style> .box { width: 100%; background-color: salmon; padding: 20px; text-align: center; } @media (min-width: 768px) { .box { width: 50%; margin: auto; background-color: seagreen; } } </style> <div class="box">Resize me - Mobile First!</div> Run Code

IV. Fluid Layouts

Explanation: Fluid layouts me fixed width ki jagah percentage use ki jati hai jisse layout screen ke hisaab se adjust ho jata hai.

<style> .container { width: 80%; background-color: lightgreen; margin: auto; padding: 20px; } </style> <div class="container">I am a fluid layout box!</div> Run Code